<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>忘记密码</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/login/forgetPass/password.css') }}">
    <script type="text/javascript" src="{{ url_for('static',filename='css/login/forgetPass/jquery-1.11.1.min.js') }}"></script>
    <!-- layui样式文件 -->
    <link rel="stylesheet" href="//cdn.bootcdn.net/ajax/libs/layui/2.5.7/css/layui.min.css">
    <!-- layui脚本文件 -->
    <script src="//cdn.bootcdn.net/ajax/libs/layui/2.5.7/layui.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var height=$(document).height();
            $('.main').css('height',height);
        })
    </script>
</head>

<body>
<div class="main">
  <div class="main0">
     <div class="formBox">
       <h3>登录密码重置</h3>
       <ul>
          <li class="mainCol firLi">&gt;身份验证</li>
          <li class="mainCol">&gt;登录密码重置</li>
          <li class="lastLi">&gt;重置完成</li>
       </ul>
       <img src="../../static/css/login/forgetPass/line2.png" />
       <div class="itembox itembox_2">
         <label>短信验证码 &nbsp;:</label>
         <input id="captcha" type="text" placeholder="请输入邮箱验证码" class="yzm"></span>
         <button class="yzmbox2" type="button" id="captcha-btn" style="font-size: 15px">获取验证码</button>
       </div>
       <div class="itembox itembox_2">
         <label>登录密码&nbsp;:</label>
         <input id="password1" type="password" placeholder="请输入新登录密码"></span>
       </div>
       <div class="itembox itembox_2">
         <label>确认密码&nbsp;:</label>
         <input id="password2" type="password" placeholder="请再次输入新密码"></span>
       </div>
       <div class="itembox itembox_2">
         <label>验证码&nbsp;:</label>
         <input id="yanzhenma" type="text" placeholder="请输入验证码" class="yzm"></span>
         <div class="yzmbox" style="margin-left: 0">
             {#请求地址person.generate_captcha获取验证码#}
             <img id="captcha_image" src="{{ url_for('person.generate_captcha') }}" alt="验证码" onclick="this.src='{{ url_for('person.generate_captcha') }}?r=' + Math.random()" width="120" height="40">
         </div>
       </div>
       <div class="btnBox">
            <button id="next">下一步</button>
       </div>
     </div>
  </div>
</div>
<script type="text/javascript">
    layui.use('layer', function(){
        var layer = layui.layer;

        var query_string=window.location.search;
        var params=new URLSearchParams(query_string);
        var email=params.get('email');
        //点击获取验证码按钮进行邮箱发送功能接受验证码
        document.getElementById("captcha-btn").onclick=function () {
            // 设置按钮不可用
            var btn = document.getElementById("captcha-btn");
            btn.disabled = true;
            // 显示倒计时，60 秒后按钮恢复可用
            var count = 60;
            var interval = setInterval(function() {
                btn.innerHTML = "重新发送(" + count + ")";
                count--;
                if (count<0) {
                    clearInterval(interval);
                    btn.disabled = false;
                    btn.innerHTML = "获取验证码";
                }
            }, 1000);
            /**
             * ajax请求：地址 /person/captcha/email  参数 邮箱
             */
            $.ajax({
                url:"/person/captcha/email?email="+email,
                method:"GET",
                success:function (res){
                    console.log(res);
                }
            });
        }
        //点击下一步按钮进行修改密码
        document.getElementById("next").onclick=function () {
            /**
             * ajax请求 地址 /person/password/confirm   参数 邮箱、验证码、两次密码
             */
            $.ajax({
                url: "/person/password/confirm",
                type: "post",
                dataType: "json",
                contentType: 'application/json',
                data:JSON.stringify({
                    'email':email,
                    'captcha':$("input[id='captcha']").val(),
                    'password1':$("input[id='password1']").val(),
                    'password2':$("input[id='password2']").val(),
                    'yanzhenma':$("input[id='yanzhenma']").val()
                }),
                success:function (res){ //回调函数接受后端返回JSON信息
                    console.log(res)
                    if(res.state==200){
                        window.location.href="{{ url_for('person.forgetPass3') }}"
                    }else {
                        layer.msg(res.msg, {icon: 5,time:1000});
                    }
                }
            });
        }
    });
</script>
</body>
</html>
